<template>
  <ContentWrap>
    <el-button @click="toContrast()" :disabled="checkedIds.length < 2">
      <Icon icon="ep:search" class="mr-5px"></Icon> 对比
    </el-button>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table ref="tableRef" row-key="id" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
      @selection-change="handleRowCheckboxChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="批次" align="center" type="index" width="55"></el-table-column>
      <el-table-column label="肌龄" align="center" prop="skin_age.value"></el-table-column>
      <el-table-column label="总体分数" align="center" prop="score_info.total_score"></el-table-column>
      <el-table-column label="肤质分类" align="center" prop="skin_type.skin_type">
        <template #default="scope">
          {{ skin_type[scope.row.skin_type?.skin_type] }}
        </template>
      </el-table-column>
      <el-table-column label="油光分数" align="center" prop="score_info.oily_intensity_score"></el-table-column>
      <el-table-column label="全脸出油严重程度" align="center" prop="oily_intensity.full_face.intensity"></el-table-column>
      <el-table-column label="全脸出油面积占比" align="center" prop="oily_intensity.full_face.area">
        <template #default="scope">
          {{ (scope.row.oily_intensity?.full_face?.area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="额头出油严重程度" align="center" prop="oily_intensity.t_zone.intensity"></el-table-column>
      <el-table-column label="额头出油面积占比" align="center" prop="oily_intensity.t_zone.area">
        <template #default="scope">
          {{ (scope.row.oily_intensity?.t_zone?.area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="左脸颊出油严重程度" align="center" prop="oily_intensity.left_cheek.intensity"></el-table-column>
      <el-table-column label="左脸颊出油面积占比" align="center" prop="oily_intensity.left_cheek.area">
        <template #default="scope">
          {{ (scope.row.oily_intensity?.left_cheek?.area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="右脸颊出油严重程度" align="center" prop="oily_intensity.right_cheek.intensity"></el-table-column>
      <el-table-column label="右脸颊出油面积占比" align="center" prop="oily_intensity.right_cheek.area">
        <template #default="scope">
          {{ (scope.row.oily_intensity?.right_cheek?.area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="下巴出油严重程度" align="center" prop="oily_intensity.chin_area.intensity">
        <template #default="scope">
          {{ oily_intensity[scope.row.oily_intensity?.chin_area.intensity] }}
        </template>
      </el-table-column>
      <el-table-column label="下巴出油面积占比" align="center" prop="oily_intensity.chin_area.area">
        <template #default="scope">
          {{ (scope.row.oily_intensity?.chin_area?.area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>

      <el-table-column label="水分分数" align="center" prop="score_info.water_score"></el-table-column>
      <el-table-column label="全脸缺水面积占比" align="center" prop="water.water_area">
        <template #default="scope">
          {{ (scope.row.water?.water_area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="额头缺水面积占比" align="center" prop="water.water_forehead.area">
        <template #default="scope">
          {{ (scope.row.water?.water_forehead?.area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="左脸颊缺水面积占比" align="center" prop="water.water_leftcheek.area">
        <template #default="scope">
          {{ (scope.row.water?.water_leftcheek?.area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="右脸颊缺水面积占比" align="center" prop="water.water_rightcheek.area">
        <template #default="scope">
          {{ (scope.row.water?.water_rightcheek?.area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>

      <!-- 肤色分析 -->
      <el-table-column label="东亚肤色分类" align="center" prop="skintone.value">
        <template #default="scope">
          {{ eastAsianSkinTone[scope.row.skintone?.value] }}
        </template>
      </el-table-column>
      <el-table-column label="ITA肤色分型" align="center" prop="skintone_ita.skintone">
        <template #default="scope">
          {{ itaSkinType[scope.row.skintone_ita?.skintone] }}
        </template>
      </el-table-column>
      <el-table-column label="HA肤色色调" align="center" prop="skin_hue_ha.skin_hue">
        <template #default="scope">
          {{ scope.row.skin_hue_ha?.skin_hue }} - {{ haSkinTone[scope.row.skin_hue_ha?.skin_hue] }}
        </template>
      </el-table-column>

      <!-- 粗糙度分析 -->
      <el-table-column label="黑头分数" align="center" prop="score_info.blackhead_score"></el-table-column>
      <el-table-column label="黑头严重程度" align="center" prop="blackhead.value">
        <template #default="scope">
          {{ blackheadSeverity[scope.row.blackhead?.value] }}
        </template>
      </el-table-column>
      <el-table-column label="黑头个数" align="center" prop="blackhead_count"></el-table-column>
      <el-table-column label="毛孔分数" align="center" prop="score_info.pores_score"></el-table-column>
      <!-- 区域毛孔数据 -->
      <el-table-column label="额头毛孔分数" align="center"
        prop="score_info.pores_type_score.pores_forehead_score"></el-table-column>
      <el-table-column label="额头毛孔严重程度" align="center" prop="pores_forehead.value">
        <template #default="scope">
          {{ poreSeverity[scope.row.pores_forehead?.value] || '未检测' }}
        </template>
      </el-table-column>
      <el-table-column label="额头粗大毛孔数" align="center" prop="enlarged_pore_count.forehead_count"></el-table-column>
      <el-table-column label="左脸颊毛孔分数" align="center"
        prop="score_info.pores_type_score.pores_leftcheek_score"></el-table-column>
      <el-table-column label="左脸颊毛孔严重程度" align="center" prop="pores_left_cheek.value">
        <template #default="scope">
          {{ poreSeverity[scope.row.pores_left_cheek?.value] || '未检测' }}
        </template>
      </el-table-column>
      <el-table-column label="左脸颊粗大毛孔数" align="center" prop="enlarged_pore_count.left_cheek_count"></el-table-column>
      <el-table-column label="右脸颊毛孔分数" align="center"
        prop="score_info.pores_type_score.pores_rightcheek_score"></el-table-column>
      <el-table-column label="右脸颊毛孔严重程度" align="center" prop="pores_right_cheek.value">
        <template #default="scope">
          {{ poreSeverity[scope.row.pores_right_cheek?.value] || '未检测' }}
        </template>
      </el-table-column>
      <el-table-column label="右脸颊粗大毛孔数" align="center" prop="enlarged_pore_count.right_cheek_count"></el-table-column>
      <el-table-column label="下巴毛孔分数" align="center"
        prop="score_info.pores_type_score.pores_jaw_score"></el-table-column>
      <el-table-column label="下巴毛孔严重程度" align="center" prop="pores_jaw.value">
        <template #default="scope">
          {{ poreSeverity[scope.row.pores_jaw?.value] || '未检测' }}
        </template>
      </el-table-column>
      <el-table-column label="下巴粗大毛孔数" align="center" prop="enlarged_pore_count.chin_count"></el-table-column>
      <el-table-column label="粗糙分数" align="center" prop="score_info.rough_score"></el-table-column>
      <el-table-column label="粗糙严重程度" align="center" prop="rough.rough_severity">
        <template #default="scope">
          {{ roughnessSeverity[scope.row.rough?.rough_severity] || '未检测' }}
        </template>
      </el-table-column>

      <!-- 区域粗糙面积 -->
      <el-table-column label="额头粗糙面积占比" align="center" prop="rough.rough_forehead.area">
        <template #default="scope">
          {{ (scope.row.rough?.rough_forehead.area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="左脸颊粗糙面积占比" align="center" prop="rough.rough_leftcheek.area">
        <template #default="scope">
          {{ (scope.row.rough?.rough_leftcheek.area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="右脸颊粗糙面积占比" align="center" prop="rough.rough_rightcheek.area">
        <template #default="scope">
          {{ (scope.row.rough?.rough_rightcheek.area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="下巴粗糙面积占比" align="center" prop="rough.rough_jaw.area">
        <template #default="scope">
          {{ (scope.row.rough?.rough_jaw.area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>

      <!-- 色素沉着 -->
      <el-table-column label="色沉分数" align="center" prop="score_info.melanin_score"></el-table-column>
      <el-table-column label="色沉严重程度" align="center" prop="melanin.melanin_concentration"></el-table-column>
      <el-table-column label="色沉面积占比" align="center" prop="melanin.brown_area">
        <template #default="scope">
          {{ (scope.row.melanin?.brown_area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="额头色沉面积占比" align="center" prop="melanin.brown_forehead">
        <template #default="scope">
          {{ (scope.row.melanin?.brown_forehead * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="左脸颊色沉面积占比" align="center" prop="melanin.brown_leftcheek">
        <template #default="scope">
          {{ (scope.row.melanin?.brown_leftcheek * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column label="右脸颊色沉面积占比" align="center" prop="melanin.brown_rightcheek">
        <template #default="scope">
          {{ (scope.row.melanin?.brown_rightcheek * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>

      <!-- 痤疮与敏感性 -->
      <el-table-column label="痘痘分数" align="center" prop="score_info.acne_score"></el-table-column>
      <el-table-column label="敏感性分数" align="center" prop="score_info.sensitivity_score"></el-table-column>
      <el-table-column label="敏感严重程度" align="center" prop="sensitivity.sensitivity_intensity"></el-table-column>
      <el-table-column label="敏感区域面积占比" align="center" prop="sensitivity.sensitivity_area">
        <template #default="scope">
          {{ (scope.row.sensitivity?.sensitivity_area * 100 || 0).toFixed(2) }}%
        </template>
      </el-table-column>
      <!-- 衰老性分析 -->
      <el-table-column label="皱纹分数" align="center" prop="score_info.wrinkle_score"></el-table-column>


      <!-- 衰老分析-细分皱纹（按用户指定顺序） -->
      <!-- 抬头纹 -->
      <el-table-column label="抬头纹分数" align="center" prop="forehead_wrinkle_info.wrinkle_score"></el-table-column>
      <el-table-column label="抬头纹严重程度" align="center" prop="forehead_wrinkle.value">
        <template #default="scope">
          {{ wrinkleSeverity[scope.row.forehead_wrinkle?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="抬头纹细纹/深纹数量" align="center">
        <template #default="scope">
          {{ scope.row.fine_line?.forehead_count || 0 }}/{{ scope.row.wrinkle_count?.forehead_count || 0 }}
        </template>
      </el-table-column>
      <!-- 左眼纹 -->
      <el-table-column label="左眼纹分数" align="center" prop="left_eye_wrinkle_info.wrinkle_score"></el-table-column>
      <el-table-column label="左眼纹严重程度" align="center" prop="left_eye_finelines_severity.value">
        <template #default="scope">
          {{ wrinkleSeverity[scope.row.left_eye_finelines_severity?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="左眼纹细纹/深纹数量" align="center">
        <template #default="scope">
          {{ scope.row.fine_line?.left_undereye_count || 0 }}/{{ scope.row.wrinkle_count?.left_undereye_count || 0 }}
        </template>
      </el-table-column>
      <!-- 右眼纹 -->
      <el-table-column label="右眼纹分数" align="center" prop="right_eye_wrinkle_info.wrinkle_score"></el-table-column>
      <el-table-column label="右眼纹严重程度" align="center" prop="right_eye_finelines_severity.value">
        <template #default="scope">
          {{ wrinkleSeverity[scope.row.right_eye_finelines_severity?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="右眼纹细纹/深纹数量" align="center">
        <template #default="scope">
          {{ scope.row.fine_line?.right_undereye_count || 0 }}/{{ scope.row.wrinkle_count?.right_undereye_count || 0 }}
        </template>
      </el-table-column>
      <!-- 左鱼尾纹 -->
      <el-table-column label="左鱼尾纹分数" align="center" prop="left_crowsfeet_wrinkle_info.wrinkle_score"></el-table-column>
      <el-table-column label="左鱼尾纹严重程度" align="center" prop="left_crow_feet_wrinkle.value">
        <template #default="scope">
          {{ wrinkleSeverity[scope.row.left_crow_feet_wrinkle?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="左鱼尾纹细纹/深纹数量" align="center">
        <template #default="scope">
          {{ scope.row.fine_line?.left_crow_count || 0 }}/{{ scope.row.wrinkle_count?.left_crow_count || 0 }}
        </template>
      </el-table-column>
      <!-- 右鱼尾纹 -->
      <el-table-column label="右鱼尾纹分数" align="center"
        prop="right_crowsfeet_wrinkle_info.wrinkle_score"></el-table-column>
      <el-table-column label="右鱼尾纹严重程度" align="center" prop="right_crow_feet_wrinkle.value">
        <template #default="scope">
          {{ wrinkleSeverity[scope.row.right_crow_feet_wrinkle?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="右鱼尾纹细纹/深纹数量" align="center">
        <template #default="scope">
          {{ scope.row.fine_line?.right_crow_count || 0 }}/{{ scope.row.wrinkle_count?.right_crow_count || 0 }}
        </template>
      </el-table-column>
      <!-- 眉间纹 -->
      <el-table-column label="眉间纹分数" align="center" prop="glabella_wrinkle_info.wrinkle_score"></el-table-column>
      <el-table-column label="眉间纹严重程度" align="center" prop="glabella_wrinkle.value">
        <template #default="scope">
          {{ wrinkleSeverity[scope.row.glabella_wrinkle?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="眉间纹细纹/深纹数量" align="center">
        <template #default="scope">
          {{ scope.row.fine_line?.glabella_count || 0 }}/{{ scope.row.wrinkle_count?.glabella_count || 0 }}
        </template>
      </el-table-column>
      <!-- 左嘴角纹 -->
      <el-table-column label="左嘴角纹分数" align="center" prop="left_mouth_wrinkle_info.wrinkle_score"></el-table-column>
      <el-table-column label="左嘴角纹严重程度" align="center" prop="left_mouth_corner_wrinkle.value">
        <template #default="scope">
          {{ wrinkleSeverity[scope.row.left_mouth_corner_wrinkle?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="左嘴角纹细纹/深纹数量" align="center">
        <template #default="scope">
          {{ scope.row.fine_line?.left_mouth_corner_count || 0 }}/{{ scope.row.wrinkle_count?.left_mouth_corner_count ||
            0 }}
        </template>
      </el-table-column>
      <!-- 右嘴角纹 -->
      <el-table-column label="右嘴角纹分数" align="center" prop="right_mouth_wrinkle_info.wrinkle_score"></el-table-column>
      <el-table-column label="右嘴角纹严重程度" align="center" prop="right_mouth_corner_wrinkle.value">
        <template #default="scope">
          {{ wrinkleSeverity[scope.row.right_mouth_corner_wrinkle?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="右嘴角纹细纹/深纹数量" align="center">
        <template #default="scope">
          {{ scope.row.fine_line?.right_mouth_corner_count || 0 }}/{{ scope.row.wrinkle_count?.right_mouth_corner_count
            || 0 }}
        </template>
      </el-table-column>
      <!-- 左法令纹 -->
      <el-table-column label="左法令纹分数" align="center"
        prop="left_nasolabial_wrinkle_info.wrinkle_score"></el-table-column>
      <el-table-column label="左法令纹严重程度" align="center" prop="left_nasolabial_fold_wrinkle.value">
        <template #default="scope">
          {{ wrinkleSeverity[scope.row.left_nasolabial_fold_wrinkle?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="左法令纹细纹/深纹数量" align="center">
        <template #default="scope">
          {{ scope.row.fine_line?.left_nasolabial_count || 0 }}/{{ scope.row.wrinkle_count?.left_nasolabial_count || 0
          }}
        </template>
      </el-table-column>
      <!-- 右法令纹 -->
      <el-table-column label="右法令纹分数" align="center"
        prop="right_nasolabial_wrinkle_info.wrinkle_score"></el-table-column>right_nasolabial_wrinkle_info.wrinkle_score
      <el-table-column label="右法令纹严重程度" align="center" prop="right_nasolabial_fold_wrinkle.value">
        <template #default="scope">
          {{ wrinkleSeverity[scope.row.right_nasolabial_fold_wrinkle?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="右法令纹细纹/深纹数量" align="center">
        <template #default="scope">
          {{ scope.row.fine_line?.right_nasolabial_count || 0 }}/{{ scope.row.wrinkle_count?.right_nasolabial_count || 0
          }}
        </template>
      </el-table-column>
      <!-- 皱纹详情 -->
      <el-table-column label="左脸皱纹分数" align="center" prop="left_cheek_wrinkle_info.wrinkle_score"></el-table-column>
      <el-table-column label="左脸皱纹严重程度" align="center" prop="left_cheek_wrinkle_severity.value">
        <template #default="scope">
          {{ wrinkleSeverity[scope.row.left_cheek_wrinkle_severity?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="左脸细纹/深纹数量" align="center">
        <template #default="scope">
          {{ scope.row.fine_line?.left_cheek_count || 0 }}/{{ scope.row.wrinkle_count?.left_cheek_count || 0 }}
        </template>
      </el-table-column>
      <el-table-column label="右脸皱纹分数" align="center" prop="right_cheek_wrinkle_info.wrinkle_score"></el-table-column>
      <el-table-column label="右脸皱纹严重程度" align="center" prop="right_cheek_wrinkle_severity.value">
        <template #default="scope">
          {{ wrinkleSeverity[scope.row.right_cheek_wrinkle_severity?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="右脸细纹/深纹数量" align="center">
        <template #default="scope">
          {{ scope.row.fine_line?.right_cheek_count || 0 }}/{{ scope.row.wrinkle_count?.right_cheek_count || 0 }}
        </template>
      </el-table-column>

      <!-- 眼部分析 -->
      <el-table-column label="眼袋检测" align="center" prop="eye_pouch.value">
        <template #default="scope">
          {{ eye_pouch[scope.row.eye_pouch?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="黑眼圈总分" align="center" prop="score_info.dark_circle_score"></el-table-column>
      <el-table-column label="左眼黑眼圈分数" align="center"
        prop="score_info.dark_circle_type_score.left_dark_circle_score"></el-table-column>
      <el-table-column label="右眼黑眼圈分数" align="center"
        prop="score_info.dark_circle_type_score.right_dark_circle_score"></el-table-column>
      <el-table-column label="黑眼圈类型" align="center" prop="dark_circle.value">
        <template #default="scope">
          {{ darkCircleType[scope.row.dark_circle?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="黑眼圈严重程度" align="center" prop="dark_circle_severity.value">
        <template #default="scope">
          {{ darkCircleSeverity[scope.row.dark_circle_severity?.value] || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="左眼血管型黑眼圈" align="center" prop="left_dark_circle_rete.value">
        <template #default="scope">
          {{ darkCircleVascularSeverity[scope.row.left_dark_circle_rete?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="右眼血管型黑眼圈" align="center" prop="right_dark_circle_rete.value">
        <template #default="scope">
          {{ darkCircleVascularSeverity[scope.row.right_dark_circle_rete?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="左眼色素型黑眼圈" align="center" prop="left_dark_circle_pigment.value">
        <template #default="scope">
          {{ darkCirclePigmentSeverity[scope.row.left_dark_circle_pigment?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="右眼色素型黑眼圈" align="center" prop="right_dark_circle_pigment.value">
        <template #default="scope">
          {{ darkCirclePigmentSeverity[scope.row.right_dark_circle_pigment?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="左眼结构型黑眼圈" align="center" prop="left_dark_circle_structural.value">
        <template #default="scope">
          {{ darkCircleStructuralSeverity[scope.row.left_dark_circle_structural?.value] || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="右眼结构型黑眼圈" align="center" prop="right_dark_circle_structural.value">
        <template #default="scope">
          {{ darkCircleStructuralSeverity[scope.row.right_dark_circle_structural?.value] || '无' }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
      @pagination="getList">
    </Pagination>
  </ContentWrap>
  <!-- 照片对比弹框 -->
  <FaceAnalyseContrast ref="faceAnalyseContrastRef"></FaceAnalyseContrast>
</template>

<script setup lang="ts">
  import { FaceanalyseResultApi, FaceanalyseResult } from '@/api/project/face/faceanalyseresult'
  import FaceAnalyseContrast from './FaceAnalyseContrast.vue'

  const skin_type = ["油性皮肤", "干性皮肤", "中性皮肤", "混合型皮肤"];
  const oily_intensity = ["没有油光或轻微泛油光", "中度油光现象", "出油严重"];
  const eastAsianSkinTone = ["透白", "白皙", "自然", "小麦", "黝黑 / 古铜"];
  const itaSkinType = ["very light", "light", "intermediate", "tan", "brown", "dark"];
  const haSkinTone = ["偏黄", "中性", "偏红", "异常的色调值"];
  const blackheadSeverity = ["无黑头", "轻度", "中度", "重度"];
  const poreSeverity = ["无毛孔", "轻度", "中度", "重度"];
  const roughnessSeverity = ["无", "轻度", "中度", "重度"];
  const wrinkleSeverity = ["无", "轻度", "中度", "重度"];
  const eye_pouch = ["无眼袋", "有眼袋"];
  const darkCircleType = ["无黑眼圈", "色素型黑眼圈", "血管型黑眼圈", "阴影型黑眼圈"];
  const darkCircleSeverity = ["轻度黑眼圈", "中度黑眼圈", "重度黑眼圈"];
  const darkCircleVascularSeverity = ["无血管型黑眼圈", "轻度血管型黑眼圈", "中度血管型黑眼圈", "重度血管型黑眼圈"];
  const darkCirclePigmentSeverity = ["无色素型黑眼圈", "轻度色素型黑眼圈", "中度色素型黑眼圈", "重度色素型黑眼圈"];
  const darkCircleStructuralSeverity = ["无结构型黑眼圈", "轻度结构型黑眼圈", "中度结构型黑眼圈", "重度结构型黑眼圈"];
  /** 会员皮肤状态分析请求 列表 */
  defineOptions({ name: 'FaceanalyseResult' })

  const { userId } = defineProps({
    userId: {
      type: Number,
      required: true,
    },
  });

  const loading = ref(true) // 列表的加载中
  const list = ref<FaceanalyseResult[]>([]) // 列表的数据
  const total = ref(0) // 列表的总页数
  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    userId: userId,
    apiKey: undefined,
    apiSecret: undefined,
    requestType: undefined,
    imageUrl: undefined,
    leftSideImageUrl: undefined,
    rightSideImageUrl: undefined,
    returnMaps: undefined,
    returnMarks: undefined,
    roiOutlineColor: undefined,
    returnSideResults: undefined,
    mark: undefined,
    createTime: []
  })
  /** 查询列表 */
  const getList = async () => {
    loading.value = true
    try {
      const data = await FaceanalyseResultApi.getFaceanalyseResultPage(queryParams)
      data.list = data.list.map((item) => {
        try {
          // 尝试解析 JSON 数据
          const result = JSON.parse(item.result)
          if (result) {
            return {
              id: item.id,
              // createTime: formatTime(item.createTime),
              imageUrl: item.imageUrl,
              ...result
            }
          }
        } catch (error) {
          // 解析失败时打印错误信息
          console.error('JSON 解析失败:', error)
        }
        return null
      }).filter((item) => item !== null) as NonNullable<typeof data.list[number]>[]
      list.value = data.list
      total.value = data.total
    } finally {
      loading.value = false
    }
  }

  /** 添加/修改操作 */
  const faceAnalyseContrastRef = ref()
  const toContrast = (resultList?: Array<object>) => {
    faceAnalyseContrastRef.value.open(checkedIds.value)
  }
  const checkedIds = ref([])
  // const handleRowCheckboxChange = (records: FaceanalyseResult[]) => {
  //   console.log(records)
  //   checkedIds.value = records.map((item) => item.id);
  // }

  // 定义表格 ref
  const tableRef = ref<InstanceType<typeof ElTable>>()

  const handleRowCheckboxChange = (records: FaceanalyseResult[]) => {
    if (records.length > 2) {
      // 当选中记录数量超过 2 条时，取消最新选中的记录
      const lastSelectedRecord = records.pop()
      if (lastSelectedRecord && tableRef.value) {
        tableRef.value.toggleRowSelection(lastSelectedRecord, false)
        useMessage().warning('最多只能选择两条记录，请手动取消已选中的记录后再更换选择。')
      }
    }
    checkedIds.value = records;
  }

  /** 初始化 **/
  onMounted(() => {
    getList()
  })

  //如果想让外部访问需要通过defineExpose方法对外暴露
  defineExpose({
    getList
  })
</script>